<script lang="ts" setup>
import type { OperatorInfo } from '@/types'
import type { FormInst } from 'nutui-uniapp'
import { useSteps } from '@/composables/useSteps'
import { useApplyStore } from '@/store'

interface Option {
  text: string
  value: string
}

const { mer_type, operatorInfo } = storeToRefs(useApplyStore())

const { next } = useSteps('operator')
const ruleForm = ref<FormInst | null>(null)
// form初始化
const form = ref<OperatorInfo>({
  respCertType: '01',
  respCertName: '',
  respCertNo: '',
  respCertStartDate: '',
  respCertEndDate: '',
  respCertAddrDet: '',
  isSpecContact: '0',
})
if (operatorInfo.value.respCertName) {
  form.value = operatorInfo.value
}
const certUploader = ref()

function certZhengValidator() {
  return new Promise((resolve) => {
    certUploader.value.validate().then((pool: any) => {
      resolve(pool.zheng)
    })
  })
}
function certBeiValidator() {
  return new Promise((resolve) => {
    certUploader.value.validate().then((pool: any) => {
      resolve(pool.bei)
    })
  })
}

const rules = {
  cert: [
    { validator: certZhengValidator, message: '请上传证件照正面图片' },
    { validator: certBeiValidator, message: '请上传证件照反面图片' },
  ],
  respCertName: [
    { required: true, message: '请输入姓名' },
  ],
  respCertNo: [
    { required: true, message: '请输入证件号码' },
    { regex: /^[0-9xX]{18}$/, message: '必须由18位的数字或字母X构成' }
  ],
  respCertStartDate: [
    { required: true, message: '请输入发证日期' },
  ],
  respCertEndDate: [
    { required: true, message: '请输入到期日期' },
  ],
  respCertAddrDet: [
    { required: true, message: '请输入证件地址' },
  ]
}

const options = ref<Option[]>([
  { text: '身份证', value: '01' },
])

const isOptions = ref<Option[]>([
  { text: '是', value: '1' },
  { text: '否', value: '0' },
])

function certUploaded(value: any) {
  if (value.type === '51') {
    form.value.respCertName = value.certName
    form.value.respCertNo = value.certNo
    form.value.respCertAddrDet = value.certAddr
  }
  else if (value.type === '52') {
    form.value.respCertStartDate = value.certStartDate
    form.value.respCertEndDate = value.certEndDate
  }
}

function clickNext() {
  // 表单校验
  ruleForm.value?.validate().then(({ valid }) => {
    if (valid) {
      // 先存数据
      form.value.respCertNo = form.value.respCertNo.toLocaleUpperCase()
      operatorInfo.value = form.value
      next()
    }
  })
}
</script>

<template>
  <div class="input">
    <steps-bar />
    <nut-form ref="ruleForm" :model-value="form" :rules="rules">
      <nut-form-item required prop="cert">
        <cert-upload ref="certUploader" type="operator" @uploaded="certUploaded" />
      </nut-form-item>
      <nut-form-item label="证件类型" required prop="respCertType" :label-width="120">
        <option-select v-model="form.respCertType" title="证件类型" :options="options" inputAlign="right" />
      </nut-form-item>
      <nut-form-item label="姓名" prop="respCertName" required :label-width="120">
        <nut-input v-model="form.respCertName" class="nut-input-text" placeholder="请输入姓名" type="text"
          input-align="right" placeholder-style="color:#ccc;" max-length="20" />
      </nut-form-item>
      <nut-form-item label="证件号码" prop="respCertNo" required :label-width="120">
        <idnumber-input v-model="form.respCertNo" placeholder="请输入证件号码" inputAlign="right" />
      </nut-form-item>
      <nut-form-item label="发证日期" prop="respCertStartDate" required :label-width="120">
        <date-picker v-model="form.respCertStartDate" title="发证日期" inputAlign="right" />
      </nut-form-item>
      <nut-form-item label="到期日期" prop="respCertEndDate" required :label-width="120">
        <date-picker v-model="form.respCertEndDate" title="到期日期" inputAlign="right" />
      </nut-form-item>
      <nut-form-item label="证件地址" prop="respCertAddrDet" required :label-width="120">
        <nut-textarea v-model="form.respCertAddrDet" class="nut-input-text" placeholder="请输入证件地址" type="text" autosize
          placeholder-style="color:#ccc;" max-length="80" />
      </nut-form-item>
      <nut-form-item v-if="mer_type === '1' || mer_type === '6'" :label="`联系人是否是${mer_type === '6' ? '责任人' : '经营者'}本人`"
        required prop="isSpecContact" :label-width="180">
        <option-select v-model="form.isSpecContact" :title="`联系人是否是${mer_type === '6' ? '责任人' : '经营者'}本人`"
          :options="isOptions" inputAlign="right" />
      </nut-form-item>
    </nut-form>

    <div class="button">
      <nut-button type="primary" custom-class="login-btn shake_o" block @click="clickNext">下一步</nut-button>
      <!-- <nut-button type="primary" block @click="clickNext">下一步</nut-button> -->
    </div>
  </div>
</template>

<route lang="json">
{
  "style": {
    "navigationBarTitleText": "商户进件",
    "backgroundColorContent": "#f1f1f1"
  }
}
</route>

<style lang="sass" scoped>
.input
  .button
    margin: 40px 20px
  
:deep(.nut-form-item__label)
  display: flex!important
  flex-direction: row!important
  min-width: 100px!important
:deep(.login-btn)
  width: 100%
  height: 85rpx
  margin-top: 30rpx
  background-color: #2196F3!important

:deep(.nut-textarea__textarea)
  text-align: right!important

:deep(.nut-uploader__upload)
  width: 100%!important

:deep(.nut-uploader__preview)
  width: 100%!important

:deep(.nut-step-main)
  margin-top: 20rpx

:deep(.nut-uploader__preview-img)
  width: 320rpx
</style>
